{% extends "business/car/car_base.html" %}
{% import "bootstrap/wtf.html" as wtf %} 
{% block title %}在售车源{% endblock %}
{% block head %} 
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-table.min.css') }}">
{% endblock %}
{% block page_content %}
<h1 class="page-header">在售车源</h1>

{{ super() }}

<div class="modal fade" id="OffModal" tabindex="-1" role="dialog" aria-labelledby="OffLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="OffLabel">下架车辆</h4>
			</div>
			<div class="modal-body">
				<center>确定下架该车辆吗？</center>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" onclick="post('Off')">确定</button>
				<button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true">取消</button>
			</div> 
		</div>
	</div><!-- /.modal-dialog -->
</div>

<div class="modal fade" id="SaleModal" tabindex="-1" role="dialog" aria-labelledby="SaleLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="SaleLabel">置为在售</h4>
			</div>
			<div class="modal-body">
				<center>确定将该车辆置为在售状态吗？</center>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" onclick="post('Sale')">确定</button>
				<button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true">取消</button>
			</div> 
		</div>
	</div><!-- /.modal-dialog -->
</div>

<div class="modal fade" id="SoldModal" tabindex="-1" role="dialog" aria-labelledby="SoldLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="SoldLabel">置为已售</h4>
			</div>
			<div class="modal-body">
				<center>确定将该车辆置为已售状态吗？</center>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" onclick="post('Sold')">确定</button>
				<button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true">取消</button>
			</div> 
		</div>
	</div><!-- /.modal-dialog -->
</div>

<div class="col-md-12">
    <div class="panel-body" style="padding-bottom:0px;">
	<ul id="myTab" class="nav nav-tabs">
            <li class="active">
		<a href="#on_sale" data-toggle="tab" onclick="setTable('on_sale')">在售</a>
   	    </li>
            <li>
		<a href="#sold" data-toggle="tab" onclick="setTable('sold')">已售</a>
	    </li>
            <li>
		<a href="#delete" data-toggle="tab" onclick="setTable('delete')">已下架</a>
	    </li>
        </ul>
	<div id="myTabContent" class="tab-content">
	    <div class="tab-pane fade in active" id="on_sale"> 
	    	 <table id="tb_car_on_sale"></table>
	    </div>
	    <div class="tab-pane fade" id="sold"> 
	    	 <table id="tb_car_sold"></table>
	    </div>
	    <div class="tab-pane fade" id="delete"> 
	    	 <table id="tb_car_delete"></table>
	    </div>
	</div>
    </div>
</div>
{% endblock %}
{% block scripts  %}
{{ super() }}
<script src="{{ url_for('static', filename='js/bootstrap-table.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-table-zh-CN.min.js') }}"></script>
<script>

$('#li_on_sale').css("background", "#E0EEE0");

$(function () {

   //初始化Table
    var table_on_sale = new TableInit("tb_car_on_sale");
    table_on_sale.Init();

    var table_sold = new TableInit("tb_car_sold");
    table_sold.Init();

    var table_delete = new TableInit("tb_car_delete");
    table_delete.Init();


});


var TableInit = function (table_id) {
    var oTableInit = new Object();
    table = document.getElementById(table_id);
    //初始化Table
    oTableInit.Init = function () {
	var url = '/business/car/sale/get_list/?list_type=on_sale';
	var operateFormatter = operateFormatter_on_sale;
	if(table_id === "tb_car_sold"){
		url = '/business/car/sale/get_list/?list_type=sold';
		operateFormatter = operateFormatter_sold;
	}
	else if(table_id === "tb_car_delete"){
		url = '/business/car/sale/get_list/?list_type=delete';
		operateFormatter = operateFormatter_delete;
	}
        $(table).bootstrapTable({
            url: url,                           //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            pagination: true,                   //是否显示分页（*）
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            columns: [{
		field: 'number',
		title: '车辆ID',
		align: 'center',
	    },{
                field: 'brand',
                title: '品牌',
		align: 'center',
            }, {
                field: 'model',
                title: '名称',
		align: 'center',
            }, {
                field: 'price',
                title: '报价',
		align: 'center',
            }, {
                field: 'owner',
                title: '提交人',
		align: 'center',
            }, {
		field: 'phone',
		title: '联系电话',
		align: 'center',
	    }, {
		field: 'car_type',
		title: '车辆类型',
		align: 'center',
	    }, {
		field: 'area',
		title: '地区',
		align: 'center',
	    }, {
		field: 'submission_date',
	    	title: '提交日期',
		align: 'center',
	    },{
                field: 'operate',
                title: '操作',
                align: 'center',
                events: operateEvents,
                formatter: operateFormatter,
            },]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            number: $("#number").val(),
            start: $("#start").val(),
	    end: $("#end").val(),
	    submitter: $("#submitter").val(),
	    area: $("#area").val(),
            search_type: $("#search_type").val(),
	    tb_name: $("#tb_name").val(),
        };
        return temp;
    };
    return oTableInit;
};

function operateFormatter_on_sale(value, row, index) {
        return [
            '<a class="edit" target="_blank" href="/business/car/edit/?number=' + row.number + '" title="编辑信息">',
            '编辑 | ',
            '</a>  ',
            '<a class="sold" href="#" title="置为已售">',
            '已售 | ',
            '</a>',
            '<a class="delete" href="#" title="下架车辆">',
            '下架',
            '</a>'

        ].join('');
};

function operateFormatter_sold(value, row, index) {
        return [
            '<a class="sale" href="#" title="恢复在售">',
            '在售 | ',
            '</a>  ',
            '<a class="delete" href="#" title="删除车辆">',
            '下架',
            '</a>'

        ].join('');
};

function operateFormatter_delete(value, row, index) {
        return [
            '<a class="check" target="_blank" href="/business/car/details/?number=' + row.number + '" title="查看车辆">',
            '查看',
            '</a>',
        ].join('');
};


window.operateEvents = {
 
       'click .sold': function (e, value, row, index) {

        	number = row.number;
		$('#SoldModal').modal();
	},
        'click .delete': function (e, value, row, index) {

        	number = row.number;
		$('#OffModal').modal();
        },
        'click .sale': function (e, value, row, index) {

        	number = row.number;
		$('#SaleModal').modal();
        }
};

var number;

var state = -1;

var post = function(type){
	
	urls = {'Off': "/business/car/sale/delete/", 
		'Sale': "/business/car/sale/on_sale/", 
		'Sold': "/business/car/sale/sold/",
		}
	
	$('#'+type+'Modal').modal('hide');

	$.ajax({
		url: urls[type],
		data: {'number': number},
		type: "POST",
		dataType:"text",
		success: function(data) {
			json = eval("("+data+")");
			state = json.state;
			if(json.state === 0){
				$('#msg').html("操作成功");
				$('#msg_icon').removeAttr('class');
				$('#msg_icon').attr('class', 'glyphicon glyphicon-ok-sign');
			}
			else{
				$('#msg').html("操作失败，" + json.msg);
				$('#msg_icon').removeAttr('class');
				$('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
			}
		},
		error: function(xhr, error){
			state = -1;
			$('#msg_icon').removeAttr('class');
			$('#msg_icon').attr('class', 'glyphicon glyphicon-remove-sign');
			$('#msg').html("操作失败，服务器发生错误");
		}
	});
	$('#MsgModal').modal();
	return;

}

$(document).ready(function(){
	$('#MsgModal').on('hidden.bs.modal', function () {
		if(state === 0){
			$("#tb_car_on_sale").bootstrapTable("refresh", {'silent': true})
			$("#tb_car_sold").bootstrapTable("refresh", {'silent': true})
			$("#tb_car_delete").bootstrapTable("refresh", {'silent': true})
		}
	})
});

var selected_table = 'on_sale';

var setTable = function(name){
	selected_table = name;
}

var search = function(){
	document.getElementById('tb_name').value = selected_table;
	$("#tb_car_" + selected_table).bootstrapTable("refresh", {'silent': true})
}

</script>
{% endblock %}
